@import 'reset';

// 嵌套

// &符号  平级的意思   伪类选择器  li与Hover本身不是嵌套关系

// 变量
$w : 1200px;    // 全局变量
$color : red ;


// 函数
@mixin fn {
    width: 300px;
    height: 300px;
}


@mixin ff($a,$b) {
    width: $a;
    height: $b;
}



.banner {
    width: $w;
}


ul {
    $wid : 300px;   // 局部变量
    width: $wid;
    height: 300px;
    background-color: #fff;
    li {
        width: $wid;
        height: 100px;
        border: 1px solid $color;
        &:hover {
            background-color: #ff0;
        }
        a {
            color: red;
        }
    }
    
}




p {
    width: $w;
}




.banner {
    @include fn ;
    ul {
        @include fn ;
        position: relative;
        li {
            @include fn ;
            position: absolute;
            left: 0;
            top: 0;
            opacity: 0;
        }
    }
}



.box {
    @include ff(500px,500px) ;
}






// 继承的类名
//   特点：被继承的类名下的所有的样式都会被继承
.a {
    width: 100px;
    height: 30px;
    border: 1px solid #000;
    &:hover {
        color: red;
    }
}


// nav 也会多一个hover
.nav {
    @extend .a ;
    font-size: 30px;
}